<!doctype html>
<head>
    <title>Threebox example</title>
    <script src="threebox-tests-bundle.js" type="text/javascript"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' style="width: 800px; height: 600px;"></div>

    <script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoia3JvbmljayIsImEiOiJjaWxyZGZwcHQwOHRidWxrbnd0OTB0cDBzIn0.u2R3NY5PnevWH3cHRk6TWQ';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v8',
      center: [-122.4131, 37.7743],
      zoom: 15.95,
      pitch: 60,
      heading: 41,
      hash: true
    });

    map.on("load", function() {
        // Initialize threebox
        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();

        var geometry = new THREE.PlaneGeometry(6378137, 6378137, 1);
        var material = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.DoubleSide});
        material.wireframe = true;
        var plane = new THREE.Mesh(geometry, material);
        threebox.addAtCoordinate(plane, [-122.4131, 37.7743,0]);

        runTests(threebox);
    });
    </script>
</body>